<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-11-05 16:04
  PageName：f_practice6_StructureTable.html
  Function：实战案例 - 设计结构化表格
  URL：http://localhost:8080/i_table/i6_practice/f_practice6_StructureTable.html
-->

<head>
    <meta charset="UTF-8">
    <title>实战案例 - 设计结构化表格</title>

    <style type="text/css">
        body {
            font-family: "宋体" arial, helvetica, sans-serif;
        }

        /* 表格基本样式 */
        table {
            border-collapse: collapse; /* 合并单元格边框 */
            font-size: 75%;
            line-height: 1.1;
        }

       /* 当鼠标经过每行时，变换背景色 */
        tr:hover, td.start:hover, td.end:hover {
            background: #FF9;
        }

        th, td {
            padding: .3em .5em;
        }

        /* 列标题基本样式 */
        th {
            font-weight: normal;
            text-align: left;
            padding-left: 15px;  /* 定义左侧补白 */
        }

        /* 数据分类标题行的样式 */
        .arrow {
            background: #eee url(images/arrow.gif) no-repeat 12px 50%;
            padding-left: 28px;
            font-weight: bold;
            color: #444;
        }

        /* 列标题样式，立体效果 */
        thead th {
            background: #c6ceda;
            border-color: #fff #fff #888 #fff;  /* 配置立体边框效果 */
            border-style: solid;  /* 实线边框样式 */
            border-width: 1px 1px 2px 1px;
            padding-left: .5em;   /* 增加左侧的补白 */
        }

        /* 树形结构非末行图标样式 */
        tbody th.start {
            background: url(images/dots.gif) 18px 54% no-repeat;
            padding-left: 26px;
        }

        /* 树形结构末行图标样式 */
        tbody th.end {
            background: url(images/dots2.gif) 18px 54% no-repeat;
            padding-left: 26px;
        }
    </style>
</head>

<body>
<table>
    <thead>
    <tr>
        <th>排名</th>
        <th>校名</th>
        <th>总得分</th>
        <th>人才培养总得分</th>
        <th>研究生培养得分</th>
        <th>本科生培养得分</th>
        <th>科学研究总得分</th>
        <th>自然科学研究得分</th>
        <th>社会科学研究得分</th>
        <th>所属省份</th>
        <th>分省排名</th>
        <th>学校类型</th>
    </tr>
    </thead>
    <tbody>

    <tr>
        <td class="arrow" colspan="12">一类</td>
    </tr>

    <tr>
        <th class="start">1</th>
        <td>清华大学</td>
        <td>296.77</td>
        <td>128.92</td>
        <td>93.83</td>
        <td>35.09</td>
        <td>167.85</td>
        <td>148.47</td>
        <td>19.38</td>
        <td>京</td>
        <td>1</td>
        <td>理工</td>
    </tr>

    <tr>
        <th class="end">2</th>
        <td>北京大学</td>
        <td>222.02</td>
        <td>102.11</td>
        <td>66.08</td>
        <td>36.03</td>
        <td>119.91</td>
        <td>86.78</td>
        <td>33.13</td>
        <td>京</td>
        <td>2</td>
        <td>综合</td>
    </tr>

    <tr>
        <td class="arrow" colspan="12">二类</td>
    </tr>

    <tr>
        <th class="start">3</th>
        <td>浙江大学</td>
        <td>205.65</td>
        <td>94.67</td>
        <td>60.32</td>
        <td>34.35</td>
        <td>110.97</td>
        <td>92.32</td>
        <td>18.66</td>
        <td>浙</td>
        <td>1</td>
        <td>综合</td>
    </tr>

    <tr>
        <th class="start">4</th>
        <td>上海交大</td>
        <td>150.98</td>
        <td>67.08</td>
        <td>47.13</td>
        <td>19.95</td>
        <td>83.89</td>
        <td>77.49</td>
        <td>6.41</td>
        <td>沪</td>
        <td>1</td>
        <td>综合</td>
    </tr>

    <tr>
        <th class="start">5</th>
        <td>南京大学</td>
        <td>136.49</td>
        <td>62.84</td>
        <td>40.21</td>
        <td>22.63</td>
        <td>73.65</td>
        <td>53.87</td>
        <td>19.78</td>
        <td>苏</td>
        <td>1</td>
        <td>综合</td>
    </tr>

    <tr>
        <th class="start">6</th>
        <td>复旦大学</td>
        <td>136.36</td>
        <td>63.57</td>
        <td>40.26</td>
        <td>23.31</td>
        <td>72.78</td>
        <td>51.47</td>
        <td>21.31</td>
        <td>沪</td>
        <td>2</td>
        <td>综合</td>
    </tr>

    <tr>
        <th class="start">7</th>
        <td>华中科大</td>
        <td>110.08</td>
        <td>54.76</td>
        <td>30.26</td>
        <td>24.50</td>
        <td>55.32</td>
        <td>47.45</td>
        <td>7.87</td>
        <td>鄂</td>
        <td>1</td>
        <td>理工</td>
    </tr>

    <tr>
        <th class="start">8</th>
        <td>武汉大学</td>
        <td>103.82</td>
        <td>50.21</td>
        <td>29.37</td>
        <td>20.84</td>
        <td>53.61</td>
        <td>36.17</td>
        <td>17.44</td>
        <td>鄂</td>
        <td>2</td>
        <td>综合</td>
    </tr>

    <tr>
        <th class="start">9</th>
        <td>吉林大学</td>
        <td>96.44</td>
        <td>48.61</td>
        <td>25.74</td>
        <td>22.87</td>
        <td>47.83</td>
        <td>38.13</td>
        <td>9.70</td>
        <td>吉</td>
        <td>1</td>
        <td>综合</td>
    </tr>

    <tr>
        <th class="end">10</th>
        <td>西安交大</td>
        <td>92.82</td>
        <td>47.22</td>
        <td>24.54</td>
        <td>22.68</td>
        <td>45.60</td>
        <td>35.47</td>
        <td>10.13</td>
        <td>陕</td>
        <td>1</td>
        <td>综合</td>
    </tr>
    </tbody>
</table>
</body>
</html>